<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改角色')" />
    <th:block th:include="include :: ztree-css"></th:block>


</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">

        <form class="form-horizontal m"  id="form-data">

            <input type="hidden" id="id" name="id" th:field="${role.id}">

            <div class="form-group">
                <label class="col-sm-3 control-label is-required">角色名称：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="name" id="name" th:field="${role.name}" required>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label is-required">权限标识：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="perms" id="perms" th:field="${role.perms}" required>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label is-required">排序：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="sorts" id="sorts" th:field="${role.sorts}"  required>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label is-required">状态：</label>
                <div class="col-sm-8">
                    <select name="status" class="form-control" th:field="${role.status}"    th:with="items=${@dict.getType('sys_normal_disable')}">
                        <option th:each="dict : ${items}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">菜单权限：</label>
                <div class="col-sm-8">
                    <label class="check-box">
                        <input class="mytree" type="checkbox" value="1">展开/折叠</label>
                    <label class="check-box">
                        <input class="mytree" type="checkbox" value="2">全选/全不选</label>
                    <label class="check-box">
                        <input class="mytree" type="checkbox" value="3" checked>父子联动</label>

                    <!--ztree插件的div -->
                    <div id="menuTrees" class="ztree ztree-border"></div>

                </div>
            </div>

        </form>



    </div>


</body>

<th:block th:include="include :: footer" />
<th:block th:include="include :: ztree-js" />

<script type="text/javascript">


    $(function(){
        //初始化ztree
        initZtree();

        //展开/全选事件
        bindCheckbox();

    });


    function initZtree(){
        var roleId=[[${role.id}]];
        console.log(roleId);
        var roleId1=$("#id").val();

        var url = ctx + "admin/role/"+roleId1+"/owner/menu";
        var options = {
            id: "menuTrees",
            url: url,
            check: { enable: true },
            expandLevel: 0,
            data: {
                simpleData: {
                    enable: false           // true / false 分别表示 使用 / 不使用 简单数据模式
                }
            }
        };
        $.tree.init(options);
    }

    //它使用了 icheck.js插件 http://icheck.fronteed.com/ 看用法
    function bindCheckbox(){

        $('input').on('ifChanged', function(obj){
            var type = $(this).val();
            var checked = obj.currentTarget.checked;
            if (type == 1) {

                if (checked) {
                    $._tree.expandAll(true);
                } else {
                    $._tree.expandAll(false);
                }
            } else if (type == "2") {
                if (checked) {
                    $._tree.checkAllNodes(true);
                } else {
                    $._tree.checkAllNodes(false);
                }
            } else if (type == "3") {
                // 是否父子联动看官网配置  http://www.treejs.cn/v3/demo.php#_201
                if (checked) {
                    $._tree.setting.check.chkboxType = { "Y": "ps", "N": "ps" };
                } else {
                    $._tree.setting.check.chkboxType = { "Y": "", "N": "" };
                }
            }
        });
    }


    /**
     * 点击了模态框的提交按钮以后触发的事件（名称必须叫 submitHandler）
     */
    function submitHandler() {
        if ($.validate.form()) {
            edit();
        }
    }

    //自定义前端表单验证规则
    $("#form-data").validate({
        //当键盘释放的时候是触发验证规则，
        onkeyup: false,
        rules:{
            //验证表单的name的值
            name:{
                //远程ajax配置
                remote: {
                    url: ctx + "admin/role/name/exists",
                    type: "get",
                    dataType: "json",
                    data: {
                        "name" : function() {
                            return $.common.trim($("#name").val());
                        },
                        "id": function(){
                            return $.common.trim($("#id").val());
                        }
                    },
                    dataFilter: function(data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            //验证表单的name的值
            perms:{
                //远程ajax配置
                remote: {
                    url: ctx + "admin/role/perms/exists",
                    type: "get",
                    dataType: "json",
                    data: {
                        "name" : function() {
                            return $.common.trim($("#perms").val());
                        },
                        "id": function(){
                            return $.common.trim($("#id").val());
                        }
                    },
                    dataFilter: function(data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            sorts: {
                digits:true
            }
        },
        // 错误消息
        messages: {
            "name": {
                remote: "该值已被占用"
            },
            "perms":{
               remote: "该值已被占用"
            }
        },
        focusCleanup: true
    });

    /**
     * 向后台java发送ajax提交请求
     */
    function edit(){
        //手工收集
        var formData={};
        formData.id=$("#form-data input[name='id']").val();
        formData.name=$("#form-data input[name='name']").val();
        formData.status=$("#form-data select[name='status']").val();
        formData.perms=$("#form-data input[name='perms']").val();
        formData.sorts=$("#form-data input[name='sorts']").val();

        //取得ztree当前选中的节点有哪些 http://www.treejs.cn/v3/api.php

        var treeObj = $.fn.zTree.getZTreeObj("menuTrees");
        var nodes = treeObj.getCheckedNodes(true);

        var menuIds=[];
        for(let index in nodes){
            menuIds.push( nodes[index].id);
        }
        formData.permsList=menuIds;

        console.log(formData);


        //另一种写法，jquery帮你封装表单序列化方法 (全自动收集)  $.serialize("#form-add")


        $.ajax({
            type:"post",
            url:ctx+"admin/role/edit",
            //解决参数中有数且序列化的问题，如果为false名称变为  permsList[],如果为true名称permsList
            traditional:true,
            data: formData,
            dataType:"json",
            //同步
            async: false,
            success:function(resp){
                //调用别人帮你封装好的方法
                $.operate.successCallback(resp);
            },error:function(e){
                console.log(e);
                $.modal.alertError("系统错误");
            }
        });

    }

</script>

</html>